<template>
  <div class="test">
    <h1 v-color>test</h1>
    <h1 v-color="'green'">test</h1>
    <input
      type="text"
      v-focus
    />
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  directives: {
    // color: {
    //   bind(el, binding) {
    //     console.log(binding)
    //     // console.log(el)
    //     el.style.color = binding.value || 'red'
    //   }
    // },
    // 简化写法 自动触发 bind 和 updated
    color(el, binding) {
      el.style.color = binding.value || 'red'
    },
    focus: {
      bind(el) {
        // 这个是在内存中触发
        // el.focus()
        el.style.color = 'blue'
      },
      inserted(el) {
        // 这个页面已经加载完毕才会触发
        el.focus()
      }
    }
  }
}
</script>
<style lang="scss"></style>
